<template>
  <div class="userList">
    <el-row :gutter="20" class="search">
      <el-col
        :span="6"
      ><span>人员搜索:</span>
        <el-input v-model="input" placeholder="请输入人员名称" />
      </el-col>
      <el-col
        :span="7"
      ><span>角色:</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in [
              { label: '运营员', value: 2 },
              { label: '维修员', value: 3 }
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="searchBtn"
        >查询</el-button>
      </el-col>
    </el-row>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="80"
        />
        <el-table-column prop="userName" label="人员名称" width="180" />
        <el-table-column prop="roleName" label="角色" width="180" />
        <el-table-column prop="mobile" label="联系电话" width="180" />
        <el-table-column prop="workCount" label="完成工单（本月）" width="180" />
        <el-table-column prop="progressTotal" label="进行中工单）" width="180" />
        <el-table-column
          prop="cancelCount"
          label="拒绝工单（本月）"
          width="180"
        />
        <el-table-column prop="role" label="操作">
          <template slot-scope="scope">
            <span
              style="margin-right: 10px; color: blue"
              @click="edit(scope.row)"
            >查看详情</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <div>
          <span>共{{ totalCount }}条记录&nbsp;&nbsp;第{{ pageIndex }}/{{
            totalPage
          }}页</span>
        </div>
        <el-pagination
          layout="prev, next"
          :total="totalCount"
          :page-size="pageSize"
          prev-text="上一页"
          next-text="下一页"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <add
      ref="child"
      :week-list="weekList"
      :mounth-list="mounthList"
      :year-list="yearList"
      :user-list="userList"
    />
  </div>
</template>

<script>
import { worklist, uesrWorkList, userInfo } from '@/api/renyuan'
import add from './components/workList-add.vue'
import getDateFn from './utils/time'
export default {
  name: 'WorkList',
  components: { add },
  data() {
    return {
      input: null,
      value: null,
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: null,
      totalPage: null,
      timeday: null,
      timeweek: null,
      timemounth: null,
      timeyear: null,
      weekList: [],
      mounthList: [],
      yearList: [],
      userList: []
    }
  },
  watch: {
    input(val) {
      if (val === '') {
        this.value = null
        this.gender()
      }
    }
  },
  created() {
    this.gender()
  },
  methods: {
    async gender() {
      const data = await worklist({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        userName: this.input,
        roleId: this.value
      })
      this.tableData = data.currentPageRecords
      this.totalCount = +data.totalCount
      this.totalPage = +data.totalPage
    },
    searchBtn() {
      this.gender()
    },
    async edit(row) {
      // 当日23：59：59
      this.timeday = getDateFn.getDate(0) + ' 23:59:59'
      // 本周开始时间00：00：00
      this.timeweek = getDateFn.getMonday('s') + ' 00:00:00'
      // 本月开始时间00：00：00
      this.timemounth = getDateFn.getMonth('s', 0) + ' 00:00:00'
      // 本年开始时间00：00：00
      this.timeyear = getDateFn.getYear('s', 0) + ' 00:00:00'

      this.weekList = await uesrWorkList({
        userId: row.userId,
        end: this.timeday,
        start: this.timeweek
      })
      this.mounthList = await uesrWorkList({
        userId: row.userId,
        end: this.timeday,
        start: this.timemounth
      })
      this.yearList = await uesrWorkList({
        userId: row.userId,
        end: this.timeday,
        start: this.timeyear
      })
      this.userList = await userInfo(row.userId)

      this.$refs.child.dialogH()
    },
    handleCurrentChange(val) {
      this.pageIndex = +val
      this.gender()
    },

    // 自定义序号
    indexMethod(index) {
      return (this.pageIndex - 1) * 10 + index + 1
    }
  }
}
</script>

<style lang="scss" scoped>
.userList {
  width: 100%;
  background-color: #fff;
  border-radius: 2px;
  .search {
    line-height: 64px;
    margin-bottom: 20px;
    padding-left: 20px;
    .el-col {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 14px;
        color: #606266;
      }
      .el-input {
        font-size: 14px;
        width: 75%;
      }
      .el-button {
        height: 36px;
        background-color: #5f84ff;
        border-color: #5f84ff;
      }
    }
  }
  .table {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    border-radius: 2px;
    .footer {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 96px;
      align-items: center;
      span {
        margin-right: 10px;
        font-weight: 400;
        font-size: 16px !important;
        color: #dbdfe5 !important;
        display: inline-block;
        line-height: 28px;
      }
    }
  }
}
.el-pagination {
  display: inline-block;
  width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-pagination .btn-prev {
  display: block !important;
  width: 70px !important;
  height: 32px !important;
  background-color: #d5ddf8;
}
::v-deep .el-pagination .btn-next {
  display: block !important;
  width: 70px !important;
  height: 32px !important;
  background-color: #d5ddf8;
}
</style>
